<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of a Rotating Rod</title>
</head>
<body>
<canvas id="physicsCanvas" width="800" height="500"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw an arrow from (fromx, fromy) to (tox, toy)
    function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // Helper function to draw an arrowhead at a point, pointing in a given angle
    function drawArrowHead(ctx, x, y, angle, headlen = 8) {
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x - headlen * Math.cos(angle - Math.PI / 6), y - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x, y);
        ctx.lineTo(x - headlen * Math.cos(angle + Math.PI / 6), y - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // Helper function to draw a filled arrowhead
    function drawFilledArrowHead(ctx, x, y, angle, headlen = 12) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0); // Tip
        ctx.lineTo(-headlen, -headlen / 2.5);
        ctx.lineTo(-headlen, headlen / 2.5);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }


    // --- Main Drawing Logic ---
    // 1. Define constants and coordinates
    const cx = 300;
    const cy = 250;
    const l = 450; // Pixel length for 'l'
    const rod_half_l = l / 2;
    const angle = Math.PI / 8; // Clockwise rotation angle
    const r_dist = l * 0.38; // Pixel distance for 'r'

    const cosA = Math.cos(angle);
    const sinA = Math.sin(angle);

    // 2. Set styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = 'italic 22px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // 3. Draw dashed horizontal line
    ctx.save();
    ctx.lineWidth = 1.5;
    ctx.setLineDash([8, 8]);
    ctx.beginPath();
    ctx.moveTo(cx - rod_half_l - 60, cy);
    ctx.lineTo(cx + l/4 + 80, cy);
    ctx.stroke();
    ctx.restore();

    // 4. Draw rotated rod
    ctx.save();
    ctx.lineWidth = 3;
    ctx.translate(cx, cy);
    ctx.rotate(angle);
    ctx.beginPath();
    ctx.moveTo(-rod_half_l, 0);
    ctx.lineTo(rod_half_l, 0);
    ctx.stroke();
    ctx.restore();
    
    // Draw mass label for the rod
    ctx.fillText('m', cx - rod_half_l * 0.8 * cosA, cy - rod_half_l * 0.8 * sinA - 20);

    // 5. Draw pivot O
    ctx.beginPath();
    ctx.arc(cx, cy, 5, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('O', cx + 15, cy - 15);
    
    // Draw a small dot on the dashed line at the pivot for dimensioning
    ctx.beginPath();
    ctx.arc(cx, cy, 3, 0, 2 * Math.PI);
    ctx.fill();


    // 6. Draw falling beetle (initial state)
    const x_impact_point = cx + l / 4;
    const y_beetle_start = cy - 80;
    
    ctx.beginPath();
    ctx.arc(x_impact_point, y_beetle_start, 4, 0, 2 * Math.PI);
    ctx.fill();
    
    // Draw arrow for beetle's velocity
    ctx.save();
    ctx.lineWidth = 2.5;
    drawArrow(ctx, x_impact_point, y_beetle_start + 6, x_impact_point, y_beetle_start + 40, 10);
    ctx.restore();
    
    // Label for beetle mass
    ctx.fillText('m', x_impact_point - 30, y_beetle_start + 10);

    // Draw dot on dashed line for impact point
    ctx.beginPath();
    ctx.arc(x_impact_point, cy, 3, 0, 2 * Math.PI);
    ctx.fill();
    
    // 7. Draw l/4 dimension line
    const y_dim_l4 = cy - 40;
    const x_start_l4 = cx;
    const x_end_l4 = x_impact_point;
    
    ctx.beginPath();
    ctx.moveTo(x_start_l4, y_dim_l4);
    ctx.lineTo(x_end_l4, y_dim_l4);
    ctx.moveTo(x_start_l4, y_dim_l4 - 10);
    ctx.lineTo(x_start_l4, y_dim_l4 + 10);
    ctx.moveTo(x_end_l4, y_dim_l4 - 10);
    ctx.lineTo(x_end_l4, y_dim_l4 + 10);
    ctx.stroke();
    // Arrowheads pointing inwards
    drawArrowHead(ctx, x_start_l4, y_dim_l4, 0); // points right
    drawArrowHead(ctx, x_end_l4, y_dim_l4, Math.PI); // points left

    // Fraction label l/4
    const x_mid_l4 = (x_start_l4 + x_end_l4) / 2;
    ctx.font = 'italic 24px Times New Roman';
    ctx.fillText('l', x_mid_l4, y_dim_l4 - 12);
    ctx.save();
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(x_mid_l4 - 15, y_dim_l4 - 1);
    ctx.lineTo(x_mid_l4 + 15, y_dim_l4 - 1);
    ctx.stroke();
    ctx.restore();
    ctx.fillText('4', x_mid_l4, y_dim_l4 + 14);
    ctx.font = 'italic 22px Times New Roman'; // Reset font

    // 8. Draw beetle on rod (current state)
    const x_beetle_on_rod = cx + r_dist * cosA;
    const y_beetle_on_rod = cy + r_dist * sinA;
    ctx.beginPath();
    ctx.arc(x_beetle_on_rod, y_beetle_on_rod, 4.5, 0, 2 * Math.PI);
    ctx.fill();
    
    // 9. Draw 'r' dimension line
    ctx.save();
    const r_offset = 35;
    ctx.translate(cx, cy);
    ctx.rotate(angle);
    ctx.beginPath();
    ctx.moveTo(0, r_offset);
    ctx.lineTo(r_dist, r_offset);
    ctx.moveTo(0, r_offset - 10);
    ctx.lineTo(0, r_offset + 10);
    ctx.moveTo(r_dist, r_offset - 10);
    ctx.lineTo(r_dist, r_offset + 10);
    ctx.stroke();
    // Inward arrows
    drawArrowHead(ctx, 0, r_offset, 0);
    drawArrowHead(ctx, r_dist, r_offset, Math.PI);
    // Label
    ctx.fillText('r', r_dist / 2, r_offset + 20);
    ctx.restore();
    
    // 10. Draw crawling arrows
    ctx.save();
    ctx.translate(x_beetle_on_rod, y_beetle_on_rod);
    ctx.rotate(angle);
    ctx.lineWidth = 1.5;
    drawArrow(ctx, 10, 0, 35, 0, 8);
    drawArrow(ctx, 15, 5, 40, 5, 8);
    ctx.restore();

    // 11. Draw rotation arrow
    const rot_radius = rod_half_l + 25;
    const rot_start_angle = 0.05;
    const rot_end_angle = angle + 0.1;
    ctx.beginPath();
    ctx.arc(cx, cy, rot_radius, rot_start_angle, rot_end_angle, false);
    ctx.stroke();
    // Arrowhead at the end of the arc
    const arrow_x = cx + rot_radius * Math.cos(rot_end_angle);
    const arrow_y = cy + rot_radius * Math.sin(rot_end_angle);
    const tangent_angle = rot_end_angle + Math.PI / 2; // Tangent direction for clockwise arc
    drawFilledArrowHead(ctx, arrow_x, arrow_y, tangent_angle, 12);

</script>
</body>
</html>